import QtQuick 2.6
import Qt.labs.controls 1.0
import QtQuick.Layouts 1.1
import "../lib"


Navigator {
    id: nav
    title: "商品详情"
    vision: true
    text: "购物车"
    contentHeight: Math.max(iHEIGHT * 18, height)

    onSubmited: contentArea.push("../qml/ShoppingNavigator.qml")
    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            Layout.preferredHeight: nav.height / 3
            Layout.fillWidth: true
            SwipeView {
                id: view

                spacing: 1
                anchors.fill: parent
                currentIndex: bar.currentIndex
                background: Rectangle { color: "gainsboro" }


                Image {
                    id: img1
                    width: view.width
                    height: view.height
                    anchors.centerIn: parent
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/p1.png"
                    BusyIndicator {
                        anchors.centerIn: parent
                        running: img1.status !== Image.Ready
                    }
                }


                Image {
                    id: img2
                    width: view.width
                    height: view.height
                    anchors.centerIn: parent
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/p1.png"
                    BusyIndicator {
                        anchors.centerIn: parent
                        running: img2.status !== Image.Ready
                    }
                }
                Image {
                    id: img3
                    width: view.width
                    height: view.height
                    anchors.centerIn: parent
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/p1.png"
                    BusyIndicator {
                        anchors.centerIn: parent
                        running: img3.status !== Image.Ready
                    }
                }
            }
            PageIndicator {
                count: view.count
                currentIndex: view.currentIndex

                anchors.bottom: view.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                interactive: true
            }
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: iWIDTH


                Label {
                    text: "aaaa"

                    elide: Text.ElideRight
                    color: "dimgray"
                    font.weight: Font.DemiBold
                    Layout.fillWidth: true
                }



            Rectangle {
                color: "gainsboro"
                Layout.fillWidth: true
                Layout.preferredHeight: 1
            }

            RowLayout {
                Layout.fillWidth: true
                spacing: iWIDTH
                Layout.preferredHeight: iHEIGHT * 0.8
                Label {
                    text: "原价：<font size=\"4\" color=\"red\">￥" + 10.0 + "</font>"

                    font.strikeout: true
                    verticalAlignment: Text.AlignVCenter
                }
                Label {
                    text: "现价：<font size=\"4\" color=\"red\">￥" + 11.0 + "</font>"
                    Layout.fillWidth: true
                    verticalAlignment: Text.AlignVCenter
                }
            }

            Rectangle {
                color: "gainsboro"
                Layout.fillWidth: true
                Layout.preferredHeight: 1
            }

            Label {
                text: "促销：<font size=\"4\" color=\"red\">￥" + 11.0 + "</font>"
                Layout.fillWidth: true
                verticalAlignment: Text.AlignVCenter
                Layout.preferredHeight: iHEIGHT * 0.8
            }
            Rectangle {
                color: "gainsboro"
                Layout.fillWidth: true
                Layout.preferredHeight: 1
            }

            RowLayout {
                Layout.fillWidth: true
            Label {
                text: "已选：<font size=\"4\" color=\"red\">￥" + 11.0 + "</font>"
                Layout.fillWidth: true
                verticalAlignment: Text.AlignVCenter
                Layout.preferredHeight: iHEIGHT * 0.8
            }
            ToolButton {
                label: Image {
                    anchors.centerIn: parent
                    width: iHEIGHT * 0.6
                    height: iHEIGHT * 0.6
                    source: "../image/navigate-next.svg"
                    sourceSize: Qt.size(width, height)

                }
                onClicked: drawer.open()
            }
            }
            Rectangle {
                color: "gainsboro"
                Layout.fillWidth: true
                Layout.preferredHeight: 1
            }


                ListView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    header: Rectangle {
                        width: listview.width
                        height: iHEIGHT
                        Row {
                            anchors.centerIn: parent
                            spacing: iWIDTH
                            Label {
                                text: "好评：" + "97%"
                                verticalAlignment: Text.AlignVCenter
                            }
                            Label {
                                text: "销量：" + 11111111
                                verticalAlignment: Text.AlignVCenter
                            }
                        }
                        Rectangle {
                            anchors.bottom: parent.bottom
                            color: "forestgreen"
                            width: parent.width * 0.6
                            height: 1
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }


         }
        }

        Drawer {
            id: drawer
            anchors.fill: parent
            edge: Qt.RightEdge
            onClicked: close()
            background.visible: true

            Rectangle {
                width: parent.width / 3 * 2
                height: parent.height

            }
        }

        Image {
            id: box
            z: 1
            source: "../image/__home.svg"
            height: 24
            width:24
            sourceSize: Qt.size(width, height)
            visible: pathAnim.running
        }

        PathAnimation {
            id: pathAnim

            duration: 2000
            easing.type: Easing.InOutElastic

            target: box
            orientation: PathAnimation.RightFirst
            anchorPoint: Qt.point(box.width/2, box.height/2)
            path: Path {
                id: path
                PathQuad {
                    id: quad
                    x: nav.width * 0.9
                    y: -box.height

                    controlX: nav.width * 0.2; controlY: nav.height * 0.5
                }
            }
        }
    }

    footer: ToolBar {
        Layout.alignment: Qt.AlignBottom
        Layout.fillWidth: true
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: "直接购买"
                Layout.preferredWidth: nav.width / 3
            }
            ToolButton {
                text: "联系客服"
                Layout.preferredWidth: nav.width / 3
            }
            ToolButton {
                Layout.fillWidth: true
                background: Rectangle {
                    color: "brown"
                }
                label: Label {
                    text: "加入购物车"
                    color: "white"
                    anchors.centerIn: parent
                }
                onClicked: {
                    var p = mapToItem(nav, mouse.x, mouse.y)
                    path.startX = p.x
                    path.startY = p.y
                    var p2 = submit.mapToItem(nav, submit.width / 2, submit.height / 2);
                    quad.x = p2.x
                    quad.y = p2.y

                    pathAnim.start()
                }
            }
        }
    }
}



